<template>
    <div>
        <div v-for="g in itemskindAll" id="skind">
                <router-link 
                    :to="{path:'/sort/kind/skind/skindItem',query:{_id:g._id}}" 
                    class="skind-item"
                >
                    <div id="imgs">
                        <img :src="'/imgs/goods/'+g.pics[0]" class="goods-img">
                    </div>
                    <div class="skind-item-right">
                        <div>
                            <p class="goods-desc" style="font-size:13px">{{g.goodsname}}</p>
                        </div>
                        <div>
                            <p style="font-size:14px;color:#ee0000;margin-right:15px">￥{{g.price}}</p>
                            <p style="font-size:13px;color:#999;margin-right:15px">
                            <span>{{g.score}}条评价</span>
                            <span style="margin-right:10px">销量{{g.sales?g.sales:0}}</span></p>
                        </div>
                    </div>
                </router-link>
            <div class="goods-div"></div>
        </div>
    </div>
</template>

<script>
export default {
    props:["itemskindAll"]
}
</script>

<style scoped>
#imgs{
    width:25%;
}
.goods-img{
    width: 30vw;
    height: 30vw;
}
#skind a{
    display:flex;
    width:100%;
    border-bottom:solid 1px #e5e5e5;
}

.skind-item-right{
    margin:0 20px;
    width:75%;
    
}
.skind-item-right p{
    text-align:left;
}
.skind-item-right div:nth-of-type(2){
    display:flex;
    justify-content:space-between;
}
.goods-desc{
    color: #111;
    padding-right: 2px;
    line-height: 16px;
    height: 32px;
    width: 241px;
    overflow : hidden;
}
.goods-desc:after{
    content: "...";
}
p{
    margin:8px 0px;
}
</style>